@extends('wx.layout.default')

@section('wx.pbody')

  <div class="weui-form">

    @include('wx.layout.header')

    <form id="wxlogin" autocomplete="off">
      {{ csrf_field() }}
      <div class="weui-form__control-area">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__bd">
                <input class="weui-input" name="mobile" type="tel" placeholder="请输入手机号码" maxlength="11">
              </div>
            </div>
            <div class="weui-cell weui-cell_active weui-cell_vcode">
              <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
            </div>
            <div class="weui-cell weui-cell_active weui-cell_vcode">
              <div class="weui-cell__bd">
                <input class="weui-input" name="smscode" value="" type="tel" placeholder="请输入验证码" maxlength="6">
              </div>
              <div class="weui-cell__ft">
                <button class="weui-btn weui-btn_default weui-vcode-btn sms">获取验证码</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="weui-form__opr-area">
        <button class="weui-btn weui-btn_primary" id="btnLogin">确定</button>

        <a class="weui-btn weui-btn_default" href="{{route('wx.reg')}}" id="btnReg">新用户注册</a>
      </div>
    </form>

  </div>

@stop

@section('javascript')
  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="{{URL::asset('/assets/js/jquery-validate-methods.js')}}"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript">
      $(function () {

          $('.sms').on('click', function () {

              var uri = '{{route('wx.sms')}}';


              $.post(uri, {
                  '_token': $("input[name='_token']").attr('value'),
                  'mobile': $("input[name='mobile']").val(),
                  'is_submit': true
              }, function (data) {
                  layer.msg(data.message, {time: 1000, shift: -1}, function () {
                      if (data.status === true && data.url != null) {
                          $(window).attr('location', data.url);
                      }
                  });

              }, 'json').error(function (data) {
                  layer.msg(data.responseJSON.message);
              });

              var count = 60;
              const countDown = setInterval(() => {

                  if (count === 0) {
                      $(this).text('获取验证码').removeAttr('disabled');
                      $(this).removeClass("grey");
                      clearInterval(countDown);
                  } else {
                      $(this).attr('disabled', true);
                      $(this).addClass("grey");
                      $(this).text(count + '秒后重新发送');
                  }
                  count--;
              }, 1000);


          });


          $("#wxlogin").validate({

              onfocusout: false,
              onkeyup: false,

              rules: {
                  mobile: {required: true, isMobile: true},
                  smscode: {required: true, digits: true, maxlength: 6, minlength: 6,},
              },
              messages: {
                  mobile: {required: "请填写手机号码"},
                  smscode: {required: "请填写验证码", maxlength: "验证码格式不正确", minlength: "验证码格式不正确", digits: "验证码格式不正确"},
              },

              showErrors: function (errorMap, errorList) {
                  $.each(errorList, function (i, v) {
                      layer.tips(v.message, v.element, {tips: 3, time: 2000});
                      //$(v.element).closest('.weui-cell').addClass('weui-cell_warn');
                      return false;
                  });
              },

              submitHandler: function (form) {
                  $.post('{{route('wx.login')}}', {
                      '_token': $("input[name='_token']").attr('value'),
                      'mobile': $("input[name='mobile']").val(),
                      'smscode': $("input[name='smscode']").val(),
                      'is_submit': true
                  }, function (data) {
                      console.log(data);
                      layer.msg(data.message, {time: 1000, shift: -1}, function () {
                          if (data.status === true && data.url != null) {
                              $(window).attr('location', data.url);
                          }
                      });

                  }, 'json').error(function (data) {
                      layer.msg(data.responseJSON.message);
                  });
              }

          });

      });
  </script>
@stop